<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        /* 
            window：浏览器给我们创建好的对象，不需要我们new，拿来直接用就可，调用window的属性或方法时，window可以省略
                三种弹窗方式：
                    alert：信息提示框
                    prompt：信息输入框
                    confirm：信息确认框
                定时任务：
        */

        /* 三种弹框 */
        function fun1(){
            alert("hello")
        }
        function fun2(){
            var a = window.prompt()
            window.console.log("a=" + a)
        }
        function fun3(){
            var flag = window.confirm("确定是吗？")
            window.console.log("flag = " + flag)
        }

        /* 定时任务 */
        // 延时触发任务
        var myTimeOut
        function fun4(){
            myTimeOut = setTimeout(function(){
                console.log("你好")
            }, 3000)
        }

        // 定时打印你好，2秒打印一次
        var myTiming = window.setInterval(function(){
                console.log("nihao")
            }, 2000)
        function fun5(){
            myTiming
        }
        // 取消延时
        function fun6(){
           window.clearTimeout(myTimeOut)
        }
        // 取消定时
        function fun7(){
            window.clearInterval(myTiming)
        }

        /* 历史history */
        function funA(){
            // history.forward()// 下一页
            history.go(1)// 与history.forward()有同样的效果，但是该方法中的数字表示连跳几页
        }
        function funB(){
            history.back()// 上一页
        }

        /* location修改地址栏中的url */
        function funC(){
            location.href="http://www.baidu.com"
        }

        /* 数据存储：sessionStorage，会话级存储；localStorage，本地存储 */
        function funD(){
            sessionStorage.setItem("keyA", "valueA")
            localStorage.setItem("keyB", "valueB")
        }
        function funE(){
            console.log(sessionStorage.getItem("keyA"))
            console.log(localStorage.getItem("keyB"))
        }
        function funF(){
            sessionStorage.removeItem("keyA")
            localStorage.removeItem("keyB")
        }
    </script>
</head>
<body>
    <button onclick=funD()>存储数据</button>
    <button onclick=funE()>获取数据</button>
    <button onclick=funF()>清除数据</button>
    <hr>
    <button onclick=funC()>百度</button>
    <hr>
    <button onclick=funB()>上一页</button>
    <button onclick=funA()>下一页</button>
    <a href="https://www.baidu.com/">百度</a>
    <hr>
    <button id="btn1" onclick=fun1()>信息提示框</button>
    <button id="btn2" onclick=fun2()>信息输入框</button>
    <button id="btn3" onclick=fun3()>信息确认框</button>
    <button id="btn4" onclick=fun4()>延时3秒打印你好</button>
    <button onclick=fun5()>定时2秒打印你好</button>
    <button onclick=fun6()>取消延时</button>
    <button onclick=fun7()>取消定时</button>
    
</body>
</html>